<template>
  <div class="chart" id="id_temperature"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { watch, shallowRef, onMounted, reactive, defineExpose } from 'vue'
import { useVisualizingCustomerStore } from '/@/stores/visualizingCustomer'
import { storeToRefs } from 'pinia';
import { formatStringDate } from '/@/utils/formatTime'

const myChart = shallowRef(null)
const store = useVisualizingCustomerStore()
const { envDataList } = storeToRefs(store)

const setChart = (dateArray, maxTemperatures, minTemperatures) => {
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    title:
    {
      text: '近7日温度变化',
      top: "5%",
      left: '5%',
      textStyle: {
        color: '#fff',
        fontSize: 12,
      }
    },
    legend:
    {
      data: [
        { name: '最高温度', icon: 'circle' },
        { name: '最低温度', icon: 'circle' },
      ],
      left: "center",
      top: "17%",
      orient: 'horizontal',
      itemWidth: 7,
      itemHeight: 7,
      itemGap: 10,
      textStyle: {
        color: '#67C3D6',
        fontSize: 10
      }
    },
    grid:
    {
      left: "5%",
      top: '35%',
      right: '5%',
      bottom: '15%'
    },
    xAxis:
    {
      axisLine: {
        lineStyle: {
          color: '#2B427F'
        }
      },
      axisLabel: {
        color: '#0DF5F8',
        fontSize: 8,
        // interval: 0,
      },
      axisTick: {
        inside: true,
        alignWithLabel: true,
        interval: 0,
        color: '#2B427F'
      },
      data: dateArray
    },

    yAxis:
    {
      type: 'value',
      scale: true,
      axisLabel: {
        color: '#61B9C8',
        showMaxLabel: false,
        fontSize: 9
      },
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolSize: [6, 6],
        lineStyle: {
          color: '#122C49'
        }
      },
      splitLine: {
        show: false,
      }
    },
    series: [
      {
        type: 'bar',
        name: '最高温度',
        barWidth: 10,
        barGap: '40%',
        itemStyle: {
          borderRadius: 2,
          color: '#00CCFF'
        },
        data: maxTemperatures
      },
      {
        type: 'bar',
        name: '最低温度',
        barWidth: 10,
        barGap: '40%',
        itemStyle: {
          borderRadius: 2,
          color: '#142AFE'
        },
        data: minTemperatures
      },
    ]

  };
  if (!myChart.value) myChart.value = echarts.init(document.getElementById('id_temperature'));
  myChart.value.clear();
  myChart.value.setOption(option);
}

watch(() => envDataList.value, (newVal, oldVal) => {
  const dateArray = []
  const maxTemperatures = []
  const minTemperatures = []
  newVal.forEach(item => {
    dateArray.push(formatStringDate(item.equipDate, 'mm-dd'));
    maxTemperatures.push(item.maxtemperature)
    minTemperatures.push(item.mintemperature)
  })
  setChart(dateArray, maxTemperatures, minTemperatures)
}, { deep: true })
const resize = () => {
  myChart.value && myChart.value.resize()
}
defineExpose({
  resize
})

</script>
<style lang="less" scoped>
.chart {
  height: 100%;
}
</style>

